<style>
    .a {
        border: 1px solid #F07C2B;
        text-align: center;
        background-color: #F0F8FA;
        margin: -2px;
        padding: 0px;
        display: inline-block;
        width: 22%;;
        position: relative;
        left: -10px;

    }

    .b {
        border-right: none;
    }

    .c {
        color: #F07C2B;
    }

    .dv1 {
        background-color: #FFFFFF;
        border: 1px solid #FF3300;
        margin: 5px;
        border-radius: 5px;;
        height: 120px;
    }

    .dv4 {
        height: 20%;
        width: 92%;
        margin: 10px;
        border-radius: 5px;
        position: relative;
        background-color: #FFF;
        z-index: 100;
    }

    .dv4:before, .dv4:after {
        content: "";
        display: block;
        border-width: 17px;
        position: absolute;
        bottom: -34px;
        left: 10px;
        border-style: solid dashed dashed;
        border-color: #FF6600 transparent transparent;
        font-size: 0;
        line-height: 0;
    }

    .dv4:after {
        bottom: -33px;
        border-color: white transparent transparent;
    }

    .dv5 {
        width: 92%;
        height: 20%;
        margin: 10px;
        border-radius: 5px;
        position: relative;
        background-color: #FFF;
        z-index: 100;
    }

    .dv5:before, .dv5:after {
        content: "";
        display: block;
        border-width: 17px;
        position: absolute;
        bottom: -34px;
        left: 10px;
        border-style: solid dashed dashed;
        border-color: #FF9900 transparent transparent;
        font-size: 0;
        line-height: 0;
    }

    .dv5:after {
        bottom: -33px;
        border-color: white transparent transparent;
    }

    .dv6 {
        width: 92%;
        height: 15%;
        margin: 10px;
        border-radius: 5px;
        position: relative;
        background-color: #FFF;
        z-index: 100;
    }

    .dv6:before, .dv6:after {
        content: "";
        display: block;
        border-width: 17px;
        position: absolute;
        bottom: -34px;
        left: 10px;
        border-style: solid dashed dashed;
        border-color: #6699FF transparent transparent;
        font-size: 0;
        line-height: 0;
    }

    .dv6:after {
        bottom: -33px;
        border-color: white transparent transparent;
    }

    .dv7 {
        margin: 10px;
        height: 20%;
        border-radius: 5px;
        width: 92%;
        position: relative;
        background-color: #FFF;
        z-index: 100;
    }

    .dv7:before, .dv7:after {
        content: "";
        display: block;
        border-width: 17px;
        position: absolute;
        bottom: -34px;
        left: 10px;
        border-style: solid dashed dashed;
        border-color: #FC6E51 transparent transparent;
        font-size: 0;
        line-height: 0;
    }

    .dv7:after {
        bottom: -33px;
        border-color: white transparent transparent;
    }

    .sp1 {
        text-align: right;
        position: relative;
        left: -2px;
        display: inline-block;
        width: 20%;
    }

    .sp2 {
        padding-left: 5px;
        text-align: left;
        position: relative;
        left: 1.52px;
        display: inline-block;
        width: 79%;
        color: white;
    }

    .dv3 {
        z-index: 100;
        width: 20%;
        position: relative;
        left: 62%;
        top: -30px;
        color: white;
    }


</style>
<ion-view view-title="">
    <ion-nav-bar>
        <!--不能没有这个标签-->
    </ion-nav-bar>

    <ion-header-bar style="background-color: #FF6600;">
        <h3 class="title" style="font-size: 1.5em;color: white;line-height: 2;">
            幸运金融</h3>
    </ion-header-bar>
    <ion-content class="padding" style="padding: 0;text-align: center;background-color: #E4E4E4;">
        <!--<div style="background-image: url(img/mwx.jpg);background-position:center;height: 200px;background-size: 90%" onload="ImageMove()">-->
        <!--<div style="border: 0px solid red;position: relative;top:85%;left: 20px;color: white">-->
        <!--<span id="sp_move1" style="display:inline-block; width:20px; height:20px; background-color:gray; border-radius:10px;">-->
        <!--1-->
        <!--</span>-->
        <!--<span id="sp_move2" style="display:inline-block; width:20px; height:20px; background-color:gray; border-radius:10px;">-->
        <!--2-->
        <!--</span>-->
        <!--<span  id="sp_move3" style="display:inline-block; width:20px; height:20px; background-color:gray; border-radius:10px;">-->
        <!--3-->
        <!--</span>-->
        <!--</div>-->
        <!--</div>-->
        <img data-ng-init="load()" ng-src="{{imgsrc}}" style="height:100px;width: 100%"/>

        <div style="margin: 10px;width: 100%">
            <span class="a b" ng-click="showDV(all)"
                  style="border-bottom-left-radius: 5px;border-top-left-radius: 5px;background-color: #F07C2B;color: white"
                  ng-style="styleall">全部</span>

            <span class="a b c" ng-click="showDV(zc)" ng-style="stylezc">众筹</span>

            <span class="a b c" ng-click="showDV(wd)" ng-style="stylewd">网贷</span>

            <span class="a b c" ng-click="showDV(yhlc)" ng-style="styleyhlc"
                  style="border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-right: 1px solid ">理财</span>

            <!--<span class="a c" style="border-bottom-right-radius: 5px;border-top-right-radius: 5px;"-->
            <!--ng-click="showDV(sjb)" ng-style="stylesjb">随机宝</span>-->

        </div>

        <div class="dv1" style="height: 150px;" id="dvzc" ng-show="boolzc" ng-repeat="pzc in productszc">
            <a ng-click="gotozcDetail(pzc.id)" style="text-decoration: none;">
                <div class="row dv6" style="border: 1px solid #6699FF;padding: 0px;text-align:right;"><p
                        style="color:#6699FF;position: relative;left: -4%;line-height: 1.5;width: 60px;">
                    众筹</p>

                    <p style="background-color:#6699FF;margin: 0px;padding-left:8px;width: 83%;position: relative;left:1%;border-top-right-radius: 5px;border-bottom-right-radius: 5px;text-align: left;line-height: 1.5;color: white">
                        {{pzc.project_name |limitTo:15}}</p></div>
                <div class="dv3" style="background-color: #6699FF"></div>
                <div style="font-family: 微软雅黑;width: 95%;position: relative;top: -50px;margin-top: 30px;">
                    <div style="position: absolute;left: 10px;top:20px;"><img ng-src="{{pzc.project_cover}}"
                                                                              style="width: 100px;height: 100px;">
                    </div>
                    <div class="row" style="position: relative;top:20px;left:120px;width:110%;">
                        <div class="col col-33 cv" style="border: 0px solid grey;">
                            <div class="center cap-value-small"
                                 style="font-size:10px;color:#6699FF;width: 100px;">
                                <p style="font-size: 15px;">{{pzc.need_fund/ 10000|currency:""}}万</p>


                            </div>
                            <div class="center cap-value-small" style="font-size: 10px;color: #979797;">
                                <p style="color: #727171;"> 目标额</p>
                            </div>
                        </div>
                        <div class="col col-33 cv" style="border: 0px solid grey;">
                            <div class="center cap-value-small"
                                 style="font-size:10px;color:#6699FF">
                                <p style="font-size: 15px;">{{pzc.rate}}%</p>
                            </div>
                            <div class="center cap-value-small" style="font-size: 10px;color: #979797;">
                                <p class="spc" style="color: #727171"> 已完成</p>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="position: relative;top:20px;left:120px;width:110%;margin-top: -20px;">
                        <div class="col col-33 cv" style="border: 0px solid grey;">
                            <div class="center cap-value-small"
                                 style="font-size:10px;color:#6699FF;width: 100px;">
                                <p style="font-size: 15px;">{{pzc.agree_fund/ 10000|currency:""}}万</p>
                            </div>
                            <div class="center cap-value-small" style="font-size: 10px;color: #979797;">
                                <p style="color: #727171;">实际融资额</p>
                            </div>
                        </div>
                        <div class="col col-33 cv" style="border: 0px solid grey;">
                            <div class="center cap-value-small"
                                 style="font-size:10px;color:#727171">
                                <p>{{pzc.province_name}}</p>

                            </div>
                            <div class="center cap-value-small" style="font-size: 10px;color: #979797;">
                                <p class="spc" style="color: #727171"> {{pzc.city_name}}</p>
                            </div>
                        </div>
                    </div>

                </div>
            </a>
        </div>
        <div class="dv1" id="dvwd" ng-show="boolwd" ng-repeat="pwd in productswd">
            <a href="#/tab/detail" style="text-decoration: none;" ng-click="toDetail('{{pwd.ID}}','wd')">
                <div class="row dv5" style="border: 1px solid #FF9900;padding: 0px;text-align:right;"><p
                        style="color:#FF9900;position: relative;left: -4%;line-height: 1.5;width: 60px;">
                    {{pwd.productCategory}}</p>

                    <p style="background-color:#FF9900;margin: 0px;padding-left:8px;width: 83%;position: relative;left:1%;border-top-right-radius: 5px;border-bottom-right-radius: 5px;text-align: left;line-height: 1.5;color: white">
                        {{pwd.productName}}</p></div>
                <div class="dv3" style="background-color: #FF9900"></div>
                <div style="font-family: 微软雅黑;width: 95%;position: relative;top: -50px;margin-top: 30px;">
                    <div class="row" style="position: relative;top:30px;left:-10px;width:110%;">
                        <div class="col col-33 cv" style="border: 0px solid grey;">
                            <div class="center cap-value-small"
                                 style="font-size:10px;;color:#FF9900;width: 100px;">
                                <p style="font-size: 15px;">{{pwd.planEarning}}%</p>


                            </div>
                            <div class="center cap-value-small" style="font-size: 10px;color: #979797;">
                                <p style="color: #727171"> 预期收益率</p>
                            </div>
                        </div>
                        <div class="col col-33 cv" style="border: 0px solid grey;">
                            <div class="center cap-value-small"
                                 style="font-size:10px;color:#727171;width: 100px;">
                                <p style="font-size: 15px;"> {{pwd.investEndDate}}天</p>


                            </div>
                            <div class="center cap-value-small" style="font-size: 10px;color: #979797;">
                                <p style="color: #727171;"> 投资期限</p>
                            </div>
                        </div>
                        <div class="col col-33 cv" style="border: 0px solid grey;">
                            <div class="center cap-value-small"
                                 style="font-size:10px;color:#727171">
                                <p style="font-size: 15px;">{{pwd.investPeopleNumber}}人</p>


                            </div>
                            <div class="center cap-value-small" style="font-size: 10px;color: #979797;">
                                <p class="spc" style="color: #727171"> 投资人数</p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="dv1" id="dvyhlc" ng-show="boolyhlc" ng-repeat="pyhlc in productsyhlc">
            <a href="#/tab/detail" style="text-decoration: none;" ng-click="toDetail('{{pyhlc.ID}}','yhlc')">
                <div class="row dv7" style="border: 1px solid #FC6E51;padding: 0px;text-align:right;"><p
                        style="color:#FC6E51;position: relative;left: -0.5%;line-height: 1.5;width: 60px;">
                    {{pyhlc.productCategory}}</p>

                    <p style="background-color:#FC6E51;margin: 0px;padding-left:8px;width: 83%;position: relative;left:1%;border-top-right-radius: 5px;border-bottom-right-radius: 5px;text-align: left;line-height: 1.5;color: white">
                        {{pyhlc.productName}}</p></div>
                <div class="dv3" style="background-color: #FC6E51"></div>
                <div style="font-family: 微软雅黑;width: 95%;position: relative;top: -50px;margin-top: 30px;">
                    <div class="row" style="position: relative;top:30px;left:-10px;width:110%;">
                        <div class="col col-33 cv" style="border: 0px solid grey;">
                            <div class="center cap-value-small"
                                 style="font-size:10px;;color:#FC6E51;width: 100px;">
                                <p style="font-size: 15px;"> {{pyhlc.planEarning}}%</p>

                            </div>
                            <div class="center cap-value-small" style="font-size: 10px;color: #979797;">
                                <p style="color: #727171">预期收益率</p>
                            </div>
                        </div>
                        <div class="col col-33 cv" style="border: 0px solid grey;">
                            <div class="center cap-value-small"
                                 style="font-size:15px;color:#727171;width: 100px;">
                                <p>{{pyhlc.investEndDate}}天</p>
                            </div>
                            <div class="center cap-value-small" style="font-size: 10px;color: #979797;">
                                <p style="color: #727171;"> 投资期限</p>
                            </div>
                        </div>
                        <div class="col col-33 cv" style="border: 0px solid grey;">
                            <div class="center cap-value-small"
                                 style="font-size:10px;color:#727171">
                                <p style="font-size: 15px;">{{pyhlc.investPeopleNumber}}人</p>
                            </div>
                            <div class="center cap-value-small" style="font-size: 10px;color: #979797;">
                                <p class="spc" style="color: #727171"> 投资人数</p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <!--<div class="dv1" id="dvsjb" ng-show="boolsjb" ng-repeat="psjb in productssjb">-->
        <!--&lt;!&ndash;<a href="#/tab/detail">&ndash;&gt;-->

        <!--<div class="row dv4" style="border: 1px solid #FF6600;padding: 0px;text-align:right;"><p-->
        <!--style="color:#FF6600;position: relative;left: -1%;line-height: 1.5;width: 60px;"><a-->
        <!--href="#/tab/detail" style="color: #FF6600;text-decoration: none;">{{psjb.productCategory}}</a></p>-->

        <!--<p style="background-color:#FF6600;margin: 0px;padding-left:8px;width: 83%;position: relative;left:1%;border-top-right-radius: 5px;border-bottom-right-radius: 5px;text-align: left;line-height: 1.5;color: white">-->
        <!--{{psjb.productName}}</p></div>-->
        <!--<div-->
        <!--class="dv3" style="background-color: #FF6600">-->
        <!--</div>-->

        <!--&lt;!&ndash;<div style="border:1px solid red">122</div>&ndash;&gt;-->
        <!--<div style="font-family: 微软雅黑;width: 95%;position: relative;top: -50px;">-->
        <!--<div class="row" style="position: relative;top:50px;left:-10px;width:110%;">-->
        <!--<div class="col col-33 cv" style="border: 0px solid grey;">-->
        <!--<div class="center cap-value-small"-->
        <!--style="font-size:10px;;color:#FF6600;width: 100px;">-->
        <!--<p style="font-size: 15px;">{{psjb.planEarning}}%</p>-->


        <!--</div>-->
        <!--<div class="center money-value-small"-->
        <!--style="font-size:14px;">-->
        <!--<p style="color: #727171"> 预期收益率</p>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="col col-33 cv" style="border: 0px solid grey;">-->
        <!--<div class="center money-value-small"-->
        <!--style="font-size:10px;color:#727171;width: 100px;">-->
        <!--<p style="font-size: 15px;">{{psjb.investEndDate}}天</p>-->


        <!--</div>-->
        <!--<div class="center cap-value-small"-->
        <!--style="font-size:14px;">-->
        <!--<p style="color: #727171;"> 投资期限</p>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="col col-33 cv" style="border: 0px solid grey;">-->
        <!--<div class="center cap-value-small"-->
        <!--style="font-size:10px;color:#727171">-->
        <!--<p style="font-size: 15px;">{{psjb.investPeopleNumber}}人</p>-->


        <!--</div>-->
        <!--<div class="center money-value-small"-->
        <!--style="font-size:14px;">-->
        <!--<p class="spc" style="color: #727171"> 投资人数</p>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
    </ion-content>
</ion-view>
